<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>设计流行企业网站</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    图标字体插件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">

</head>
<body class="container">
<!--导航条-->
<div class="head fixed-top">
    <div class="mx-5 row py-3">
        <!--        左侧图标-->
        <div class="col-4">
            <a href="javascript:void(0);" class="show">
                <i class="fa fa-bars fa-2x"></i>
            </a>
        </div>
        <!--        中间图标-->
        <div class="col-4 text-center d-none d-sm-block">
            <a href="javascript:void(0);">
                <i class="fa fa-television fa-2x"></i>
            </a>
        </div>
        <div class="col-4 text-center d-block d-sm-none">
            <a href="javascript:void(0);">
                <i class="fa fa-mobile fa-2x"></i>
            </a>
        </div>
        <!--        右侧图标-->
        <div class="col-4 text-right">
            <a href="javascript:void(0);" class="show1">
                <i class="fa fa-user-o fa-2x"></i>
            </a>
        </div>
    </div>
</div>
<!--轮播广告区-->
<div id="carouselControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner max-h">
        <div class="carousel-item active">
            <img src="http://pic1.win4000.com/wallpaper/e/53950a3b6a031.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-sm-block">
                <h5>推荐一</h5>
                <p>说明</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="http://img3.imgtn.bdimg.com/it/u=2827579658,557400668&fm=214&gp=0.jpg" class="d-block w-100"
                 alt="...">
            <div class="carousel-caption d-none d-sm-block">
                <h5>推荐二</h5>
                <p>说明</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="http://pic1.win4000.com/wallpaper/d/533b9dd987f3c.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-sm-block">
                <h5>推荐三</h5>
                <p>说明</p>
            </div>
        </div>
    </div>
    <a href="#carouselControls" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a href="#carouselControls" class="carousel-control-next" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--功能区-->
<div class="text-center">
    <h2 class="color">欢&nbsp;迎&nbsp;您&nbsp;!</h2>
    <h6 class="my-3">最专业、最权威的技术团队用心做事，为企业客户提供最领先的房产配套系统服务</h6>
</div>
<ul class="nav justify-content-center nav-head">
    <li class="nav-item">
        <a href="javascript:;" class="nav-link">
            <i class="fa fa-home"></i>
            <h6 class="size">买房</h6>
        </a>
    </li>
    <li class="nav-item">
        <a href="javascript:;" class="nav-link">
            <i class="fa fa-university"></i>
            <h6 class="size">出售</h6>
        </a>
    </li>
    <li class="nav-item">
        <a href="javascript:;" class="nav-link">
            <i class="fa fa-hdd-o"></i>
            <h6 class="size">租赁</h6>
        </a>
    </li>
</ul>
<h5 class="text-center my-3">查找您需要的房子 <i class="fa fa-hand-o-down color1"></i></h5>
<div class="container">
    <form>
        <div class="form-group">
            <input type="search" class="form-control form-control-lg" placeholder="您需要房子的编号或者房子的类型">
        </div>
    </form>
    <a href="javascript:;" class="btn1 border d-block text-center py-2">搜索</a>
</div>
<!--特色展示区-->
<div class="text-center mt-3">
    <h2 class="color">特&nbsp;色&nbsp;楼&nbsp;盘</h2>
    <h6 class="my-3">最专业、最权威的技术团队用心做事，为企业客户提供最领先的房产配套系统服务</h6>
</div>
<div class="row">
    <div class="col-12 col-md-4">
        <div class="box">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593079959800&di=b3f1a717503eb971b3b4138361e2fb8e&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F121006%2F219049-12100616021661.jpg"
                 class="img-fluid" alt="">
            <div class="box-content">
                <h3 class="title">地址</h3>
                <span class="post">北京五环商品房</span>
                <ul class="icon">
                    <li><a href="javascript:;"><i class="fa fa-search"></i></a></li>
                    <li><a href="javascript:;"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="card border-0 pt-0">
            <div class="card-body">
                <h6>户型:三层别墅</h6>
                <h6>面积:360平方</h6>
                <h6>预售价:860万</h6>
                <h6 class="mt-3"><a href="javascript:;" class="btn2 border py-1 px-3">详情</a></h6>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="box">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593079959800&di=2eeb49bdacb2444909cb1b5f1811024e&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fdcbbs%2F16404%2Fa16403614_s.jpg"
                 class="img-fluid" alt="">
            <div class="box-content">
                <h3 class="title">地址</h3>
                <span class="post">北京五环商品房</span>
                <ul class="icon">
                    <li><a href="javascript:;"><i class="fa fa-search"></i></a></li>
                    <li><a href="javascript:;"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="card border-0 pt-0">
            <div class="card-body">
                <h6>户型:三层别墅</h6>
                <h6>面积:360平方</h6>
                <h6>预售价:860万</h6>
                <h6 class="mt-3"><a href="javascript:;" class="btn2 border py-1 px-3">详情</a></h6>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="box">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593079959799&di=537cd29bb0d7aec43272455d6ce1df9c&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191112%2F12%2F1573531604-moAHJunWcw.jpg"
                 class="img-fluid" alt="">
            <div class="box-content">
                <h3 class="title">地址</h3>
                <span class="post">北京五环商品房</span>
                <ul class="icon">
                    <li><a href="javascript:;"><i class="fa fa-search"></i></a></li>
                    <li><a href="javascript:;"><i class="fa fa-link"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="card border-0 pt-0">
            <div class="card-body">
                <h6>户型:三层别墅</h6>
                <h6>面积:360平方</h6>
                <h6>预售价:860万</h6>
                <h6 class="mt-3"><a href="javascript:;" class="btn2 border py-1 px-3">详情</a></h6>
            </div>
        </div>
    </div>
</div>
<!--设计脚注-->
<div class="bg-dark py-5">
    <ul class="nav justify-content-center list pb-3">
        <li class="nav-item">
            <a href="javascript:;" class="nav-link p-0">
                <i class="fa fa-qq"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link p-0">
                <i class="fa fa-weixin"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link p-0">
                <i class="fa fa-twitter"></i>
            </a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link p-0">
                <i class="fa fa-maxcdn"></i>
            </a>
        </li>
    </ul>
    <hr class="border-white my-0 mx-5" style="border:1px dotted red">
    <ul class="nav justify-content-center pt-0">
        <li class="nav-item">
            <a href="javascript:;" class="nav-link text-white">企业文化</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link text-white">企业特色</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link text-white">企业项目</a>
        </li>
        <li class="nav-item">
            <a href="javascript:;" class="nav-link text-white">联系我们</a>
        </li>
    </ul>
    <hr class="border-white my-0 mx-5" style="border:1px dotted red">
    <div class="text-center text-white mt-2">Copyright 2020-2-14 圣耀地产 版权所有</div>
</div>
<!--设计侧边导航栏-->
<div class="sidebar min-vh-100 text-white">
    <div class="sidebar-header">
        <div class="text-right">
            <a href="javascript:;" class="del">
                <i class="fa fa-times text-white"></i>
            </a>
        </div>
    </div>
    <h3 class="mb-0 pb-3 pl-4">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2873647816,48562372&fm=26&gp=0.jpg"
             class="img-fluid mr-2" width="35" alt="">圣耀地产
    </h3>
    <ul class="list-group">
        <li class="list-group-item" data-toggle="collapse" href="#collapse">
            买新房 <i class="fa fa-gratipay ml-2"></i>
            <div class="collapse border-bottom border-top border-white" id="collapse">
                <ul class="list-group">
                    <li class="list-group-item">
                        <i class="fa fa-rebel mr-2"></i>普通住房
                    </li>
                    <li class="list-group-item">
                        <i class="fa fa-rebel mr-2"></i>特色别墅
                    </li>
                    <li class="list-group-item">
                        <i class="fa fa-rebel mr-2"></i>奢华豪宅
                    </li>
                </ul>
            </div>
        </li>
        <li class="list-group-item">买二手房</li>
        <li class="list-group-item">出售房屋</li>
        <li class="list-group-item">租赁房屋</li>
    </ul>
</div>
<!--设计登陆页-->
<div class="vh-100 vw-100 reg">
    <div class="container mt-5">
        <div class="text-right">
            <a href="javascript:;" class="dell">
                <i class="fa fa-times fa-2x"></i>
            </a>
        </div>
        <h2 class="text-center mb-5">圣耀地产</h2>
        <form>
            <div class="input_block form-group">
                <input type="text" id="name" name="name" required class="input text-center form-control">
                <label for="name" class="label">姓名</label>
            </div>
            <div class="input_block form-group">
                <input type="email" id="email" name="email" required class="input text-center form-control">
                <label for="email" class="label">邮箱</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label for="exampleCheck1" class="form-check-label">记住我?</label>
            </div>
        </form>
        <button type="button" class="btn btn-primary btn-block my-2">登陆</button>
        <h6 class="text-center"><a href="javascript:;">忘记密码</a><span class="mx-4">|</span><a
                href="javascript:;">立即注册</a></h6>
    </div>
</div>
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>

    $(function () {
        //    隐藏侧边栏
        $('.del').click(function () {
            $('.sidebar').animate({
                'left': '-200px',
            });
        });
        $('.show').click(function () {
            $('.sidebar').animate({
                'left': '0px',
            });
        });
    });
    $('.dell').click(function () {
        $('.reg').animate({
            'top': '-100vh',
        });
        $('.reg').hide();
        $('.main').show()
    });
    $('.show1').click(function () {
        $('.reg').animate({
            'top': '0',
        });
        $('.reg').show();
        $('.main').hide();
    });
</script>
</body>
</html>